<template>
  <div class="card-table">
    <div class="table-header">
      <div class="header-botton-if">
        <slot name="tableHeader"></slot>
      </div>
      <div class="header-button-ri">
        <!-- <el-button :icon="Refresh" circle> </el-button>
        <el-button :icon="Printer" circle> </el-button>
        <el-button :icon="Operation" circle> </el-button>
        <el-button :icon="Search" circle> </el-button> -->
      </div>
    </div>

    <!-- 表格主体 -->
    <el-table border :data="tableData" ref="tableRef" v-bind="$attrs" class="hei" table-layout="auto">

      <el-table-column prop="id" label="分类id" width="100" align="center" show-overflow-tooltip />
      <el-table-column prop="shopAddId" width="100" label="店铺ID" align="center" show-overflow-tooltip />
      <el-table-column prop="TopcategoryName" width="150" label="一级分类名" align="center" show-overflow-tooltip />
      <el-table-column prop="categoryName" width="150" label="二级分类名" align="center" show-overflow-tooltip />
      <el-table-column label="分类图片" width="190" align="center">
        <template #default="scope">
          <div class="demo-image">
            <div class="block">
              <!-- {{  }} -->
              <el-image style="width: 100px; height: 100px" :src="imgUrl() + scope.row.category1Img" />
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="" width="730" label="" align="center" show-overflow-tooltip />
      <el-table-column fixed="right" label="操作" width="240" align="center">

        <!-- 表格操作 -->
        <template #default="scope">
          <!-- <el-button
                type="primary"
                link
                :icon="View"
                @click="showData(scope)"
                >查看</el-button
              > -->


          <el-button :type="scope.row.identity ? 'primary' : 'danger'" :icon="EditPen"
            @click="EditeData(scope)">更新分类</el-button>

          <el-popconfirm confirm-button-text="是" cancel-button-text="不" :icon="InfoFilled" icon-color="#626AEF"
            title="你确定要删除商家吗？" @confirm="confirmEvent(scope)">
            <template #reference>
              <el-button type="danger">删除分类</el-button>
            </template>
          </el-popconfirm>
        </template>



      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div class="pagin">
      <div class="pagin-left">
      </div>
      <Pagination :pageTotalSize="pageTotalSize"></Pagination>
    </div>


  </div>
</template>

<script setup>
import SearchForm from "@/components/SearchForm/index.vue";

import { baseUrl } from "@/utils/util"
import Pagination from "./Pagination/index.vue";
import {
  Refresh,
  Printer,
  Operation,
  Search,
  CirclePlus,
  Delete,
  EditPen,
  Download,
  Upload,
  View,
  InfoFilled,
} from "@element-plus/icons-vue";
import { ElMessage } from 'element-plus'
import { computed, ref, toRaw, watchEffect } from "vue";
// import { worksData } from "@/stores/worksData.js";
// import {staffData} from "@/stores/staff.js" 
import { useRouter } from 'vue-router'
import { userManage } from "@/stores/user.js"
import { mainStore } from "@/stores";
import { goodsInfo } from "@/stores/goodsInfo.js"

// 是否显示搜索模块
let props = defineProps({
  isShowSearch: {
    type: Boolean,
    default: true
  },
  staffInfoData: {
    type: Array,
    default: []
  }
})
let mStore = mainStore();
//商品的仓库
let goodsinfo = goodsInfo()

//图片地址

let imgUrl = computed(() => {

  // console.log(tableData.storeImg,"tableData.storeImg")
  return baseUrl
})

let pageTotalSize = computed(() => {
  // return mStaff.pageTotalSize
})

//使用路由
let router = useRouter()

let mStaff = userManage()

let emit = defineEmits(["openDoor", "openAddDoor"])

let isSearch = computed(() => {
  return props.isShowSearch
})
// const isShowSearch = ref(true);
// let wData = worksData();

// 获取仓库里面的作品数据
let tableData = computed(() => {
  // console.log(wData.teamsWorksdata)
  let newData = []
  let data = toRaw(props.staffInfoData)

  //  console.log(data,"这是从父亲传过来的")
  data.forEach(item => {
    newData.push({ ...item, ...item.identity })
  })
  // console.log(newData)
  return newData
});

//更新分类
let EditeData = (e)=>{
    mStaff.imgUrl = e.row.category1Img
    emit("openDoor",e.row)
    console.log(e.row,"e.row")

}

// 删除商品分类
let confirmEvent = async (e) => {
  let res = await goodsinfo.deletecategory1Data({ id: e.row.id })
  if (res.code == 200) {
    // emit("uploadSuccess")
    goodsinfo.getcategory1Data({ shopAddId: mStore.userinfo.shopAddress.id })

    ElMessage({
      showClose: true,
      message: res.mess,
      type: 'success',
    })
  } else {
    ElMessage({
      showClose: true,
      message: res.mess,
      type: 'error',
    })
  }


}


//添加商家商店位置
let addShopSite = (e) => {

  // this.$router.push({ name: 'addSite' });
  // this.$router.push({ name: 'addSite' });
  // this.$router.push('/');

  // mStaff.$patch((state)=>{
  //   console.log(state,"state")
  //   state.userShopData = e.row
  // })
  mStaff.updatauserShopData(e.row)
  router.push({ name: 'addSite' })
  // console.log(router,"fesfe")

  // console.log(e.row,"商家店铺位置")
}



// 提交数据
let pushData = () => {
  // console.log(selectData.value);
  // console.log("提交数据")
};

</script>

<style lang="scss" scoped>
.card-table {
  box-sizing: border-box;
  background-color: #fff;
  padding: 15px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }

  .pagin {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .pagin-left {
      display: flex;
      align-items: center;
      font-size: 14px;

      .mar {
        margin-left: 20px;

        .a {
          margin: 0 4px;
        }
      }
    }
  }

  .hei {
    width: 100%;
    height: 100%;
  }
}
</style>